<template>
  <div class="ele-body">
    <el-card shadow="never" body-style="padding:22px 22px 0 22px;">
      <!-- 搜索表单 -->
      <el-form ref="searchForm" :model="table.where" label-width="120px" @keyup.enter.native="$refs.classTable.reload()"
               @submit.native.prevent>
        <el-row>
          <el-col :md="8" :sm="12">
            <el-form-item label="规则名称:" prop="name">
              <el-input v-model="table.where.name" placeholder="请输入" clearable/>
            </el-form-item>
          </el-col>
          <el-col :md="8" :sm="12">
            <el-form-item label="描述:" prop="desc">
              <el-input v-model="table.where.desc" placeholder="请输入" clearable/>
            </el-form-item>
          </el-col>
          <el-col :md="8" :sm="12" v-if="searchExpand">
            <el-form-item label="服务调用次数:" prop="callTimes">
              <el-input-number v-model="table.where.callTimes" placeholder="请输入" controls-position="right"
                               class="ele-fluid ele-text-left"/>
            </el-form-item>
          </el-col>
          <el-col :md="8" :sm="12" v-if="searchExpand">
            <el-form-item label="上次调度时间:" prop="lastTime">
              <el-date-picker v-model="table.where.lastTime" type="datetime" placeholder="请选择"
                              value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <el-col :md="8" :sm="12" v-if="searchExpand">
            <el-form-item label="状态:" prop="state">
              <el-select v-model="table.where.state" placeholder="请选择" clearable style="width: 100%;">
                <el-option label="运行中" value="0"/>
                <el-option label="已上线" value="1"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="8" :sm="12">
            <el-form-item class="ele-text-right">
              <el-button type="primary" @click="$refs.classTable.reload()" icon="el-icon-search" class="ele-btn-icon">查询
              </el-button>
              <el-button @click="(table.where={})&&$refs.classTable.reload()">重置</el-button>
              <el-link v-if="searchExpand" @click="searchExpand=false" type="primary" :underline="false">
                收起<i class="el-icon-arrow-up"></i>
              </el-link>
              <el-link v-else @click="searchExpand=true" type="primary" :underline="false">
                展开<i class="el-icon-arrow-down"></i>
              </el-link>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <!-- 表格工具栏 -->
      <div class="ele-table-tool">
        <div class="ele-table-tool-title">基础列表</div>
        <div class="ele-table-tool-right">
          <el-button @click="showEdit=true" type="primary" icon="el-icon-plus" class="ele-btn-icon">添加
          </el-button>
          <el-dropdown @command="dropClick">
            <el-button class="ele-btn-icon" :disabled="choose.length===0">批量操作<i
                class="el-icon-arrow-down"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="del">批量删除</el-dropdown-item>
              <el-dropdown-item command="check">批量审批</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-alert type="info" class="ele-alert-border" :closable="false" style="margin-bottom: 15px;">
        <i class="el-icon-info ele-text-info"></i>
        <span class="ele-text">
          已选择 <b class="ele-text-info">{{ choose.length }}</b> 项<em/>服务调用次数总计 <b>{{ sumTimes }} 万</b>
        </span><em/><em/>
        <el-link @click="clearChoose" type="primary" :underline="false">清空</el-link>
      </el-alert>
      <!-- 数据表格 -->
      <ele-data-table ref="table" :config="table" :choose.sync="choose" highlight-current-row>
        <template slot-scope="{index}">
          <el-table-column type="selection" width="45" align="center" fixed="left"/>
          <el-table-column type="index" :index="index" width="45" align="center" fixed="left" show-overflow-tooltip/>
          <el-table-column prop="name" label="规则名称" sortable show-overflow-tooltip min-width="110"/>
          <el-table-column prop="desc" label="描述" sortable show-overflow-tooltip min-width="110"/>
          <el-table-column prop="callTimes" label="服务调用次数" sortable show-overflow-tooltip min-width="135">
            <template slot-scope="{row}">{{ row.callTimes }} 万</template>
          </el-table-column>
          <el-table-column prop="state" label="状态" sortable min-width="110">
            <template slot-scope="{row}">
              <ele-dot :type="['','success','danger','info'][row.state]" :ripple="row.state===0"
                       :text="['运行中','已上线','异常','关闭'][row.state]"/>
            </template>
          </el-table-column>
          <el-table-column prop="lastTime" label="上次调度时间" sortable show-overflow-tooltip min-width="135">
            <template slot-scope="{row}">{{ row.lastTime | toDateString }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="160" fixed="right">
            <template slot-scope="{row}">
              <el-link @click="edit(row)" icon="el-icon-edit" type="primary" :underline="false">配置</el-link>
              <el-link @click="$message('click')" icon="el-icon-finished" type="primary" :underline="false">订阅警报
              </el-link>
            </template>
          </el-table-column>
        </template>
      </ele-data-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <el-dialog :title="editForm.id?'配置规则':'新建规则'" :visible.sync="showEdit" width="400px"
               @closed="editForm={}" :destroy-on-close="true" :lock-scroll="false">
      <el-form :model="editForm" ref="editForm" :rules="editRules" label-width="82px" @submit.native.prevent>
        <el-form-item label="规则名称:" prop="name">
          <el-input v-model="editForm.name" placeholder="请输入规则名称" clearable/>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input v-model="editForm.desc" placeholder="请输入描述" :rows="4" type="textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showEdit=false">取消</el-button>
        <el-button type="primary" @click="save" :loading="editLoading">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ListBasic",
  data() {
    return {
      table: {                      // 表格配置
        url: 'https://cdn.eleadmin.com/20200610/list-demo-basic.json',
        where: {}
      },
      choose: [],  // 表格选中数据
      editForm: {},                    // 编辑弹窗数据
      editRules: {                     // 编辑弹窗表单验证规则
        name: [
          {required: true, message: '请输入规则名称', trigger: 'blur'}
        ]
      },
      showEdit: false,             // 是否显示编辑弹窗
      editLoading: false,          // 编辑表单加载状态
      searchExpand: false          // 搜索表单是否展开
    }
  },
  computed: {
    /* 计算服务总调用次数 */
    sumTimes() {
      let sum = 0;
      this.choose.forEach(d => sum += d.callTimes);
      return sum;
    }
  },
  methods: {
    /* 清空选择 */
    clearChoose() {
      this.$refs.classTable.clearSelection();
    },
    /* 保存编辑 */
    save() {
      this.$refs['editRuleForm'].validate((valid) => {
        if (valid) {
          this.editLoading = true;
          setTimeout(() => {
            this.editLoading = false;
            this.showEdit = false;
            this.$message({type: 'success', message: '保存成功'});
          }, 300);
        } else {
          return false;
        }
      });
    },
    /* 编辑 */
    edit(row) {
      this.editForm = Object.assign({}, row);
      this.showEdit = true;
    },
    /* 下拉按钮点击 */
    dropClick(command) {
      if (command === 'del') {
        this.$message('点击了批量删除');
        this.clearChoose();
      } else if (command === 'check') {
        this.$message('点击了批量审批');
      }
    }
  }
}
</script>

<style scoped>

</style>